<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="./mdui/css/mdui.min.css">
    <script src="./mdui/js/mdui.min.js"></script>
</head>

<body
    class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto mdui-loaded"
    id="p-d">

    <header class="mdui-appbar mdui-appbar-fixed">
        <div class="mdui-toolbar mdui-color-theme">

            <!-- Tool Bar -->
            <div class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                mdui-drawer="{target: &#39;#main-drawer&#39;, swipe: true}">
                <i class="mdui-icon material-icons">menu</i>
            </div>

            <a class="mdui-typo-headline">Application</a>

            <div class="mdui-toolbar-spacer"></div>

            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                <i class="mdui-icon material-icons">color_lens</i>
            </span>

            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                <i class="mdui-icon material-icons">close</i>
            </span>

        </div>
    </header>

    <div class="mdui-drawer" id="main-drawer">
        <div class="mdui-list" mdui-collapse="{accordion: true}">

            <!-- 
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i>
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i>
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-brown">view_carousel</i>
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i>
            -->

            <!-- Near Me -->
            <div class="mdui-collapse-item">
                <div class="mdui-list-item mdui-collapse-item-header mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
                    <div class="mdui-list-item-content">Near Me</div>
                    <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                </div>
                <div class="mdui-list mdui-collapse-item-body">
                    <div class="mdui-list-item mdui-ripple">子Item1</div>
                    <div class="mdui-list-item mdui-ripple">子Item2</div>
                    <div class="mdui-list-item mdui-ripple">子Item3</div>
                </div>
            </div>

            <!-- Layers -->
            <div class="mdui-collapse-item">
                <div class="mdui-list-item mdui-collapse-item-header mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i>
                    <div class="mdui-list-item-content">Layers</div>
                    <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                </div>
                <div class="mdui-list mdui-collapse-item-body">
                    <div class="mdui-list-item mdui-ripple">子Item1</div>
                    <div class="mdui-list-item mdui-ripple">子Item2</div>
                    <div class="mdui-list-item mdui-ripple">子Item3</div>
                </div>
            </div>

            <!-- Widgets -->
            <div class="mdui-collapse-item">
                <div class="mdui-list-item mdui-collapse-item-header mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i>
                    <div class="mdui-list-item-content">Widgets</div>
                    <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                </div>
                <div class="mdui-list mdui-collapse-item-body">
                    <div class="mdui-list-item mdui-ripple">子Item1</div>
                    <div class="mdui-list-item mdui-ripple">子Item2</div>
                    <div class="mdui-list-item mdui-ripple">子Item3</div>
                </div>
            </div>

            <!-- View Carousel -->
            <div class="mdui-collapse-item">
                <div class="mdui-list-item mdui-collapse-item-header mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-brown">view_carousel</i>
                    <div class="mdui-list-item-content">View Carousel</div>
                    <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                </div>
                <div class="mdui-list mdui-collapse-item-body">
                    <div class="mdui-list-item mdui-ripple">子Item1</div>
                    <div class="mdui-list-item mdui-ripple">子Item2</div>
                    <div class="mdui-list-item mdui-ripple">子Item3</div>
                </div>
            </div>

            <!-- Local Mall -->
            <div class="mdui-collapse-item">
                <div class="mdui-list-item mdui-collapse-item-header mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i>
                    <div class="mdui-list-item-content">Local Mall</div>
                    <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                </div>
                <div class="mdui-list mdui-collapse-item-body">
                    <div class="mdui-list-item mdui-ripple">子Item1</div>
                    <div class="mdui-list-item mdui-ripple">子Item2</div>
                    <div class="mdui-list-item mdui-ripple">子Item3</div>
                </div>
            </div>

        </div>
    </div>

</body>

</html>
